<style lang="scss" scoped>
.editPassword{
    height: 100vh;
    background:#f5f5f5;
}
.btn{
    width: 80%;
    margin-top: 20px;
    margin-left: 10%;
}
</style>
<template>
    <div class="editPassword">
        <navigator 
            :back="true"
            :title="'修改密码'"
        />
        <van-cell-group>
            <van-field
                type="password"
                label-align="right"
                v-model="objPage.loginPassword" 
                label="新密码：" 
                placeholder="请输入新密码" />
        </van-cell-group>
        <van-cell-group>
            <van-field 
                type="password"
                label-align="right"
                v-model="objPage.loginRePassword" 
                label="确认密码：" 
                placeholder="请输入确认密码：" />
        </van-cell-group>

        <div class="btn">
            <van-button 
                round 
                type="info"
                :block="true"
                @click="edit()">
                修改密码
            </van-button>
        </div>
    </div>
</template>
<script>
    import navigator from '@/components/navigator.vue';

    // 导入修改密码接口
    import {
        forgetPassword
    } from '@/api'
    export default {
        // 事件
        methods: {
            edit(){
                // 判断密码长度不能低于6位
                if(this.objPage.loginPassword.length < 6){
                    // vant轻提示
                    this.$toast('密码格式不正确')
                    return
                }
                // 判断两次密码输入不一致
                if(this.objPage.loginPassword !== this.objPage.loginRePassword){
                    // vant轻提示
                    this.$toast('两次密码输入不一致')
                    return
                }
                // 调用修改密码的接口
                forgetPassword(this.objPage).then(res => {
                    if(res.data.code == 1){
                        this.$toast({
                            message: '修改成功，请重新登录...',
                            duration: 1500,
                            onClose: () => {
                                // 清除本地存储
                                localStorage.clear();
                                // 跳转登录页面
                                this.$router.push('/login')
                            }
                        })
                    }else{
                        this.$toast(res.data.msg)
                    }
                })
            }
        },
        data(){
            return {
                objPage: {
                    loginPassword: '',
                    loginRePassword: ''
                }
            }
        },
        components: {
            navigator
        }
    }
</script>